<template>
  <ui-container>
    <template #extra>
      <u-button type="primary" @click="handleOnClickToEdit(-1, 'add')">
        新增
      </u-button>
    </template>
    <template #search>
      <u-form :schema="searchFormSchema" :dataSource="searchData">
        <template #footer>
          <u-button type="primary" @click="handleOnClickToSearch">
            搜索
          </u-button>
        </template>
      </u-form>
    </template>

    <template #container>
      <a-table
        :columns="columns"
        :data-source="pageData"
        :rowKey="(record) => record.id"
        :pagination="pagination"
        :loading="loading"
        @change="handleOnChangeToLoadTable"
      >
        <template #permissionType="{ record }">
          <a-tag color="pink" v-if="record.permissionType == 'DIR' || record.permissionType == 'MENU'">
            {{ record.permissionType }}
          </a-tag>
          <a-tag color="purple" v-else>
            {{ record.permissionType }}
          </a-tag>
        </template>
        <template #permissionName="{ record }">
          <icon-font
            :icon="record.permissionIcon"
            v-if="record.permissionIcon"
          ></icon-font>
          {{ record.permissionName }}
        </template>
        <template #permissionKey="{ record }">
          <a-tag color="pink" v-if="record.permissionComponent">
            {{ record.permissionComponent }}
          </a-tag>
          <a-tag color="purple" v-if="record.permissionKey">
            {{ record.permissionKey }}
          </a-tag>
        </template>
        <template #permissionState="{ record }">
          <a-switch
            v-model:checked="record.permissionState"
            @change="(checked) => handleChangeToUpdateState(checked, record.id)"
          >
            <template #checkedChildren><check-outlined /></template>
            <template #unCheckedChildren><close-outlined /></template>
          </a-switch>
        </template>
        <template #action="{ record }">
          <u-button
            type="link"
            title="编辑"
            @click="handleOnClickToEdit(record.id, 'edit')"
            >编辑</u-button
          >
          <u-button
            type="link"
            title="删除"
            @click="handleOnClickToDelete(record.id)"
            >删除</u-button
          >
        </template>
      </a-table>
    </template>
  </ui-container>
</template>

<script>
import UIContainer from "basicLayoutComponent/UIContainer";

import UICLI from "components/ui-cli";

import { Table, Switch, Tag } from "ant-design-vue";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons-vue";

import Index from "./index";

import IconFont from "components/icon/IconFont";

import {
  getPermissionForTree,
  deletePermissionById,
  updatePermissionState,
} from "@/access/api/permission/index";

import { confirm, showMess } from "utils/Util";

export default {
  name: "PermissionList",
  components: {
    ATable: Table,
    ASwitch: Switch,
    ATag: Tag,
    UForm: UICLI.UForm,
    UButton: UICLI.UButton,
    UiContainer: UIContainer,
    IconFont,
    CheckOutlined,
    CloseOutlined,
  },
  data() {
    return {
      searchFormSchema: Index.searchFormSchema,
      columns: Index.columns,
      pageData: [],
      pagination: {},

      loading: false,

      searchData: {
        currentIndex: 1,
        permissionName: "",
      },
    };
  },
  methods: {
    getPermissionPageData() {
      this.loading = true;
      getPermissionForTree(this.searchData).then((res) => {
        if (res) {
          this.loading = false;

          this.pageData = res.datas;

          const pagination = { ...this.pagination };
          pagination.total = res.pagination.totalCount;
          this.pagination = pagination;
        }
      });
    },
    handleOnChangeToLoadTable(pagination, filters, sorter) {
      this.searchData.currentIndex = pagination.current;
      this.getPermissionPageData();
    },
    handleOnClickToSearch() {
      this.getPermissionPageData();
    },
    handleOnClickToDelete(id) {
      confirm(() => {
        deletePermissionById({ id }).then((res) => {
          if (res) {
            showMess("资源删除成功");
            this.getPermissionPageData();
          }
        });
      }, "确认是否删除当前资源？");
    },
    handleOnClickToEdit(id, _env) {
      let env = "add";
      if (_env) {
        env = _env;
      } else {
        env = -1 == id ? "add" : "edit";
      }
      this.$router.push({
        path: `/${env}/permission/${id}`,
      });
    },
    handleChangeToUpdateState(checked, id) {
      updatePermissionState({
        permissionState: checked ? 1 : 0,
        id,
      }).then((res) => {
        if (res) {
          if (checked) showMess("资源已启用");
          else showMess("资源已禁用");
          // this.getPermissionPageData();
        }
      });
    },
  },
  created() {
    this.getPermissionPageData();
  },
};
</script>

<style lang="less" scoped>
</style>